<template>
    <view
       class="container"
       @click="$u.route({
            url: 'pages_v2/seriesInfo/index',
            params: {
                id: series.id
            }
        })"
    >
        <view class="seriesImage">
            <image
                :src="series.coverImg"
                class="mainBanner"
                mode="widthFix"
            ></image>
            <view class="sell-out">已售罄</view>
        </view>
        <u-text
            :text="series.title"
            size="32rpx"
            :lines="1"
            margin="20rpx 0 13rpx 0"
            color="#000000"
            lineHeight="45rpx"
        ></u-text>
        <author-item
           :author="series.author"
        ></author-item>
    </view>
</template>

<script>
    import AuthorItem from "@/components/AuthorItem"
    export default {
        name: "index",
        components: {
            AuthorItem
        },
        props: {
            series: {
                type: Object,
                default: () => {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 30rpx 36rpx;
        margin-bottom: 30rpx;
        background: #ffffff;
        .seriesImage {
            position: relative;
            .mainBanner {
                width: 678rpx;
                height: 678rpx;
            }
            .sell-out {
                position: absolute;
                right: 22rpx;
                top: 30rpx;
                width: 160rpx;
                height: 58rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 29rpx;
                font-size: 30rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 58rpx;
                text-align: center;

            }
        }
    }
</style>
